<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="类别列表" />
    </div>
  </div>
  <div class="main-content">
    <div class="left-panel">
      <van-sidebar v-model="categoryActive">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.ID"
          :title="item.MALL_CATEGORY_NAME"
        />
      </van-sidebar>
    </div>
    <div class="right-panel">
      <div class="category-tab">
        <van-tabs v-model:active="categorySubActive">
          <van-tab
            v-for="item in categorySubList"
            :key="item.ID"
            :title="item.MALL_SUB_NAME"
            :name="item.ID"
          >
          </van-tab>
        </van-tabs>
      </div>
      <div class="list-box">
        <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
          <van-list
            v-if="list.length > 0"
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            :immediate-check="false"
            :offset="0"
          >
            <div
              class="list-item"
              @click="goGoodsInfo(item.ID)"
              v-for="(item, index) in list"
              :key="index"
            >
              <van-image
                :src="item.IMAGE1"
                width="100"
                height="100"
                fit="contain"
                lazy-load
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>

              <div class="list-item-text">
                <div class="list-item-name">{{ item.NAME }}</div>
                <div class="list-item-price">￥{{ item.ORI_PRICE }}</div>
              </div>
            </div>
          </van-list>
          <van-empty description="暂无商品" v-else/>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { defineComponent, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import {
  getCategoryList,
  getCategorySubList,
  getGoodsListByCategorySubID
} from '../api/goods'
export default defineComponent({
  setup() {
    const router = useRouter()
    const categoryList = ref([])
    const categorySubList = ref([])
    const categoryActive = ref(0)
    const categorySubActive = ref(0)
    const loading = ref(false)
    const finished = ref(false)
    const isRefresh = ref(false)
    const list = ref([])
    const page = ref(1)
    const categorySubId = ref('')
    const getCategory = () => {
      return new Promise((resolve, reject) => {
        getCategoryList().then((res) => {
          if (res.code === 200 && res.data) {
            resolve(res.data)
          } else {
            reject('服务器错误,数据取得失败')
          }
        })
      })
    }
    const getCategorySub = (categoryId) => {
      return new Promise((resolve, reject) => {
        getCategorySubList({ categoryId }).then((res) => {
          if (res.code === 200 && res.data) {
            resolve(res.data)
          } else {
            reject('服务器错误,数据取得失败')
          }
        })
      })
    }
    const getList = (categorySubId, page) => {
      return new Promise((resolve, reject) => {
        getGoodsListByCategorySubID({ categorySubId, page }).then((res) => {
          if (res.code === 200 && res.data) {
            resolve(res.data)
          } else {
            reject('服务器错误,数据取得失败')
          }
        })
      })
    }
    const onRefresh = () => {
      setTimeout(() => {
        isRefresh.value = false
        init()
      }, 500)
    }
    const onLoad = async () => {
      loading.value = true
      page.value = page.value + 1
      const _list = await getList(categorySubActive.value, page.value)
      if (_list.length > 0) {
        loading.value = false
        list.value.push(..._list)
      } else {
        Toast('没有更多了')
        finished.value = true
      }
    }
    const goGoodsInfo = (id) => {
      router.push({ name: 'goods', query: { goodsId: id } })
    }
    const init = async () => {
      try {
        categoryList.value = await getCategory()
        categorySubList.value = await getCategorySub(
          categoryList.value[categoryActive.value].ID
        )
        list.value = await getList(categorySubActive.value,page.value)
      } catch (error) {
        Toast.error(error)
      }
    }
    watch(categoryActive, async (value) => {
      categorySubList.value = await getCategorySub(categoryList.value[value].ID)
    })
    watch(categorySubActive, async (value) => {
      page.value = 1
      list.value = await getList(value, page.value)
      if (finished.value) {
        finished.value = false
      }
    })
    onMounted(() => {
      init()
    })
    return {
      categoryList,
      categorySubList,
      list,
      categoryActive,
      categorySubActive,
      getCategorySub,
      getList,
      onRefresh,
      loading,
      finished,
      isRefresh,
      categorySubId,
      page,
      goGoodsInfo,
      onLoad
    }
  }
})
</script>
<style lang="scss" scoped>
.main-content {
  margin-bottom: 50px;
  height: calc(100vh - 96px);
  display: flex;
  .left-panel {
    width: 25%;
    height: calc(100vh - 96px);
  }
  .right-panel {
    width: 75%;
    overflow: scroll;
    .category-tab {
    }
    .list-box {
    }
  }
  .list-item {
    display: flex;
    flex-direction: row;
    font-size: 0.8rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    padding: 5px;

    .list-item-text {
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      .list-item-name {
        font-size: 14px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .list-item-price {
        color: red;
        font-size: 16px;
        text-align: left;
      }
    }
  }
}
</style>